<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/util.js"></script>
</head>

<script>
    let productId;
    window.onload = function () {
        productId = getQuery("productId");
        init();
    }

    async function add() {
        let params = {
            productId: productId,
            comment: $("content").value
        }
        let result = await ajaxGet("/comment/add", params);
        if (result == "ok") {
            await init();
        }
    }

    async function init() {
        let info = await ajaxGet("/product/findById", {productId});
        $("nameSpan").innerHTML = info.productName;
        $("priceSpan").innerHTML = info.productPrice;
        $("productImg").src = "/html/imgs/productImg/" + info.productImg + ".jpg";
        let str = "";
        for (let i = 0; i < info.count; i++) {
            let obj = info.commentBeanList[i];
            console.log(obj);
            str += `<tr><td>${obj.eUserBean.username}</td><td>${obj.comment}</td></tr>`;
        }
        $("speakData").innerHTML = str;
    }


</script>


<body>
<div style="display: flex;height: 300px">
    <div style="width: 400px">
        <img src="" id="productImg" width="200" height="260" alt="">
    </div>
    <div style="width: 400px">
        <span id="nameSpan"></span><br>
        单价：<span id="priceSpan"></span><br>
        评论数量：<span id="infoSpan"></span><br>
    </div>
</div>

<table border="1" cellspacing="0" width="60%">
    <thead>
    <tr>
        <th>评论人</th>
        <th>评论内容</th>
    </tr>
    </thead>
    <tbody id="speakData">
    </tbody>
</table>

<div>
    请输入评论内容：<input type="text" id="content">
    <input type="button" value="评论" onclick="add()">
</div>

</body>
</html>